<div>

  <div class="content d-flex flex-column flex-column-fluid">

    <sub-header [title]="'GameSetup' | localize" [description]="activityId + '|' + activityName">
      <div action="back"><i class="icon-fanhui text-info" (click)="goBack()"></i></div>
      <div role="actions"></div>
    </sub-header>



    <<div [class]="containerClass">
      <div class="card card-custom gutter-b">
        <div class="card-body">
          <div class="row">
            <div class="modal-body">
              <tabset class="tab-container tabbable-line">
                <tab heading="{{l('BasicSetup')}}" customClass="m-tabs__item icon-jibenxinxi"
                  (selectTab)="changeSetup('basic')">
                </tab>
                <tab heading="{{l('AdvancedSetup')}}" customClass="m-tabs__item icon-gaojishezhi"
                  (selectTab)="changeSetup('advanced')">
                </tab>
                <tab heading="{{l('LotterySetup')}}" customClass="m-tabs__item active icon-jiangxiangshezhi"
                  (selectTab)="changeSetup('prize')">
                </tab>
                <tab heading="{{l('GameSetup')}}" active="true" customClass="m-tabs__item icon-youxiguanli"
                  (selectTab)="changeSetup('game')">
                  <div class="m-subheader">
                    <div class="d-flex align-items-center">
                      <div class="text-right  col-12">
                        <button (click)="deleteGameList()" class="btn btn-primary blue">
                          <i class="icon-piliangcaozuo"></i> {{l("deleteBatch")}}</button>
                        <button class="btn btn-primary" (click)="createGame()"
                          *ngIf="isGranted('Pages.Tenant.Activities.Create')">
                          <i class="fa fa-plus"></i>
                          {{l("createGame")}}</button>
                      </div>
                    </div>
                  </div>


                  <div class="row align-items-center">
                    <!--<Primeng-Datatable-Start>-->
                    <div class="primeng-datatable-container" [busyIf]="PrizePrimeng.isLoading">
                      <!-- resizableColumns="PrizePrimeng.resizableColumns" -->
                      <p-table #prizeDataTable (onLazyLoad)="getGame($event)" [value]="PrizePrimeng.records"
                        [rows]="PrizePrimeng.defaultRecordsCountPerPage" [(selection)]="gameList" [paginator]="false"
                        [lazy]="true" [resizableColumns]="PrizePrimeng.resizableColumns"
                        [responsive]="PrizePrimeng.isResponsive">
                        <ng-template pTemplate="header">
                          <tr>
                            <th
                              *ngIf="isGranted('Pages.Tenant.Activities.Delete')||isGranted('Pages.Tenant.Activities.Edit')">
                              {{l('Actions')}}</th>
                            <th style="width: 5.0em">
                              <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                            </th>
                            <th style="width:5%">{{l('RecordId')}}</th>
                            <th>{{l('name')}}</th>
                            <th>{{l('isSendWechatBeforeGame')}}</th>
                            <th>{{l('isSendWechatAfterGame')}}</th>
                            <th>{{l('isShareAction')}}</th>
                            <!-- <th>{{l('gameType')}}</th> -->
                            <!-- <th>{{l('supportedPlayersCount')}}</th> -->
                          </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-record let-i="rowIndex">
                          <tr [pSelectableRow]="record" [attr.trid]="record.id">
                            <td
                              *ngIf="isGranted('Pages.Tenant.Activities.Delete')||isGranted('Pages.Tenant.Activities.Edit')">
                              <div class="btn-group dropdown" dropdown normalizePosition>
                                <button class="dropdown-toggle btn btn-sm btn-primary" data-toggle="dropdown"
                                  dropdownToggle aria-haspopup="true" aria-expanded="false">
                                  <i class="fa fa-cog"></i>
                                  <span class="caret"></span> {{l("Actions")}}
                                </button>
                                <ul class="dropdown-menu" *dropdownMenu>
                                  <li *ngIf="isGranted('Pages.Tenant.Activities.Edit')">
                                    <a (click)="editGame(record)" class="icon-bianji dropdown-item">{{l('Edit')}}</a>
                                  </li>
                                  <li *ngIf="isGranted('Pages.Tenant.Activities.Delete')">
                                    <a (click)="deleteGame(record)" class="icon-icon-test dropdown-item">{{l('Delete')}}</a>
                                  </li>
                                </ul>
                              </div>
                            </td>
                            <td style="width: 5.0em">
                              <p-tableCheckbox [value]="record"></p-tableCheckbox>
                            </td>
                            <td> {{transIndex(i,prizePaginator)}}</td>
                            <td>
                              <span>{{record.name}}</span>
                            </td>
                            <td>
                              <span>{{l(record.isSendSnsMsgBeforeGame)}}</span>
                            </td>
                            <td>{{l(record.isSendSnsMsgAfterGame)}}</td>
                            <td>{{l(record.isShareAction)}}</td>
                            <!-- <td>{{record.gameType}}</td> -->
                            <!-- <td>{{record.supportedPlayersCount}}</td> -->
                          </tr>
                        </ng-template>
                        <ng-template pTemplate="emptymessage" let-records>
                          <tr *ngIf="PrizePrimeng.records">
                            <td colspan="7">
                              <img class="emptymessage" src="/assets/common/images/placeholder/deviceHolder.png" />
                            </td>
                          </tr>
                        </ng-template>
                      </p-table>
                      <div class="primeng-paging-container">
                        <p-paginator [rows]="PrizePrimeng.defaultRecordsCountPerPage" #prizePaginator
                          (onPageChange)="getGame($event)" [totalRecords]="PrizePrimeng.totalRecordsCount"
                          [rowsPerPageOptions]="PrizePrimeng.predefinedRecordsCountPerPage">
                        </p-paginator>
                        <span class="total-records-count">
                          {{l('TotalRecordsCount', PrizePrimeng.totalRecordsCount)}}
                        </span>
                      </div>
                    </div>
                    <!--<Primeng-Datatable-End>-->
                  </div>



                </tab>
              </tabset>
              <createOrEditGameModal #createOrEditGameModalComponent (modalSave)="getGame()"></createOrEditGameModal>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>